<template>
    <view class="u-album">
        <view class="u-album-row" v-for="(arr, index) in showUrls" :key="index">
			<view v-for="(url, index1) in arr" :key="index1">
				<view class="image-box" @tap="previewFullImage ? onPreviewTap(getSrc(url),index,index1) : ''" :style="[imageStyle(index + 1, index1 + 1)]">
					<image :style="[{
                            width: imageWidth,
                            height: imageHeight
                        }
                    ]" :src="url" mode="aspectFill"></image>
					<view class="lock-image" v-if="locks.indexOf(url) != -1 && openAd && !(urls.length > rowCount * showUrls.length &&
					        index === showUrls.length - 1 &&
					        index1 === showUrls[showUrls.length - 1].length - 1) ">
							<view class="lock-txt" :class="fontSize">看广告解锁</view>
					</view>
					<view class="more-image" v-if="
					        urls.length > rowCount * showUrls.length &&
					        index === showUrls.length - 1 &&
					        index1 === showUrls[showUrls.length - 1].length - 1
					    ">
						<view class="jia" :class="fontSize">+{{urls.length - maxCount}}</view>
						<view class="lock-txt" v-if="openAd" :class="fontSize">看广告解锁</view>
						</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>

/**
 * Album 相册
 * @description 本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码
 * @tutorial https://www.uviewui.com/components/album.html
 *
 * @property {Array}           urls             图片地址列表 Array<String>|Array<Object>形式
 * @property {String}          keyName          指定从数组的对象元素中读取哪个属性作为图片地址
 * @property {String | Number} singleSize       单图时，图片长边的长度  （默认 180 ）
 * @property {String | Number} multipleSize     多图时，图片边长 （默认 70 ）
 * @property {String | Number} space            多图时，图片水平和垂直之间的间隔 （默认 6 ）
 * @property {String}          singleMode       单图时，图片缩放裁剪的模式 （默认 'scaleToFill' ）
 * @property {String}          multipleMode     多图时，图片缩放裁剪的模式 （默认 'aspectFill' ）
 * @property {String | Number} maxCount         取消按钮的提示文字 （默认 9 ）
 * @property {Boolean}         previewFullImage 是否可以预览图片 （默认 true ）
 * @property {String | Number} rowCount         每行展示图片数量，如设置，singleSize和multipleSize将会无效	（默认 3 ）
 * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
 *
 * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
 * @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album>
 */
export default {
    name: 'u-album',
	props: {
		urls: {
			type: Array,
			default () {
				return [];
			}
		},
		locks: {
			type: String,
			default () {
				return "";
			}
		},
		fontSize: {
			type: String,
			default () {
				return "default";
			}
		},
		// 是否可以预览图片
		previewFullImage: {
			type: Boolean,
			default: true
		},
		// 是否打开广告
		openAd: {
			type: Boolean,
			default: false
		},
		// 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量
		maxCount: {
		    type: [String, Number],
		    default: 4
		},
		// 最多几行
		maxRow: {
		    type: [String, Number],
		    default: 1
		},
		// 多图时，图片边长 （默认 140 ）
		multipleSize: {
		    type: [String, Number],
		    default: 140
		},
		// 多图时，图片水平和垂直之间的间隔 （默认 12 ）
		space: {
		    type: [String, Number],
		    default: 24
		},
		// 每行展示图片数量，如设置，singleSize和multipleSize将会无效
		rowCount: {
		    type: [String, Number],
		    default: 4
		},
	},
	created() {
		this.openAd = this.website.openAd;
	},
    computed: {
		imageStyle() {
		    return (index1, index2) => {
		        const { space, rowCount, multipleSize, urls } = this,
		            { addUnit, addStyle } = uni.$u,
		            rowLen = this.showUrls.length,
		            allLen = this.urls.length
		        const style = {
		            marginRight: addUnit(space),
		            marginBottom: addUnit(space)
		        }
		        // 如果为最后一行，则每个图片都无需下边框
		        if (index1 === rowLen) style.marginBottom = 0
		        // 每行的最右边一张和总长度的最后一张无需右边框
		        if (
		            index2 === rowCount ||
		            (index1 === rowLen &&
		                index2 === this.showUrls[index1 - 1].length)
		        )
		            style.marginRight = 0
		        return style
		    }
		},
        // 将数组划分为二维数组
        showUrls() {
            const arr = []
			
			var h = 0;
            this.urls.map((item, index) => {
				if (index + 1 <= this.maxCount) {
					if(h < this.maxRow){
						// 判断对应的索引是否存在
						if (!arr[h]) {
						    arr[h] = []
						}
						arr[h].push(item);
						var l = arr[h].length;
						if(l == this.rowCount){
							h++;
						}
					}
				}
				
				
               /* // 限制最大展示数量
                if (index + 1 <= this.maxCount) {
                    // 计算该元素为第几个素组内
                    const itemIndex = Math.floor(index / this.rowCount)
                    // 判断对应的索引是否存在
                    if (!arr[itemIndex]) {
                        arr[itemIndex] = []
                    }
                    arr[itemIndex].push(item)
                } */
            })
            return arr
        },
		imageWidth() {
		    return uni.$u.addUnit(
		        this.multipleSize
		    )
		},
		imageHeight() {
		    return uni.$u.addUnit(
		        this.multipleSize
		    )
		},
    },
    methods: {
		// 预览图片
		onPreviewTap(url,index,index1) {
			var lockIndex = this.locks.indexOf(url);
			var flag = false;
			if(this.urls.length > this.rowCount * this.showUrls.length &&index === this.showUrls.length - 1 &&index1 === this.showUrls[this.showUrls.length - 1].length - 1){
				flag = true;
			}
			
			if((lockIndex == -1 && flag == false) || this.openAd == false){
				
				const newUrls = this.urls.filter((item,index,self) => {
				    return this.locks.indexOf(item) < 0 || this.openAd == false;
				});
				
				const urls = newUrls.map((item) => {
				    return this.getSrc(item)
				});
				uni.previewImage({
				    current: url,
				    urls
				});
			}else{
				this.$emit('preAd', (res)=> {
				   if(res){
					   this.locks = "";
					   const urls = this.urls.map((item) => {
					       return this.getSrc(item)
					   });
					   uni.previewImage({
					       current: url,
					       urls
					   });
				   }
				})
			}
		},
		// 获取图片的路径
		getSrc(item) {
		    return uni.$u.test.object(item)
		        ? (this.keyName && item[this.keyName]) || item.src
		        : item
		},
    }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-album {
	display: flex;
	flex-direction: column;
}
.u-album-row {
	display: flex;
}
.image-box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.image-box image {
	border-radius: 5px;
}
.more-image {
	position: absolute;
	color: #fff;
	font-size: 21px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #14121299;
	flex-direction: column;
}
.lock-image {
	position: absolute;
	color: #fff;
	font-size: 22rpx;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #14121299;
}
.lock-txt {
	font-weight: bold;
}
.default {
	font-size: 22rpx;
	padding: 5px 3px;
	background-color: red;
}
.large {
	font-size: 28rpx;
	padding: 5px 3px;
	background-color: red;
}
.mini {
	font-size: 14rpx;
}
.jia {
	background-color: unset;
}
</style>